<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天猫列表页</title>
	<link rel="stylesheet" href="css/shopList.css">
</head>
<body>
<!-- /*页面最顶部------开始*/ -->
<div class="pagetop">
	<div class="pagetop-content">
		<p><img src="images/shopList-Home.png"><a href="index.html">天猫首页</a>
			<a href="login.html" target="_Blank">请登录</a>
			<a href="register.html" target="_Blank">免费注册</a>
		</p>
		<ul>
			<li><a href="#"><i class="iconfont icon-liebiao"></i>网站导航</a></li>
			<li><a href="#">商家支持</a></li>
			<li><a href="#">淘宝网</a></li>
			<li><a href="#"><i class="iconfont icon-shouji"></i>手机版</a></li>
			<li><a href="#">收藏夹</a></li>
			<li><a href="cart.html"><i class="iconfont icon-gouwuchexuanzhong"></i>购物车</a></li>
			<li><a href="#">我的淘宝</a></li>
		</ul>
	</div>
</div>
<!-- /*页面最顶部------结束*/ -->

<div style="clear: both;"></div>

<!-- 搜索框--------开始 -->
<div class="search-box">
	<div class="search-content">
		<div class="logo"><a href="./index.html"><img src="images/head-logo.png"></div></a>
		<div class="search"><input type="text" id="searchInput" placeholder="搜索 天猫 商品/品牌/店铺"><input type="submit" value="搜 索" id="submitInput"></div>
	</div>
</div>
<!-- 搜索框--------结束 -->

<div style="clear: both;"></div>

<!-- 导航栏--------开始 -->
<div class="nav">
	<div class="nav-content">
		<a href="#">电器城首页</a>
		<a href="#">新首发</a>
		<a href="#">酷玩街</a>
		<a href="#">花呗分期</a>
		<a href="#">手机馆</a>
		<a href="#">苏宁易购</a>
	</div>
</div>
<!-- 导航栏--------结束 -->

<div style="clear: both;"></div>

<!-- banner--------开始 -->
<div class="banner">
	<div class="banner-left">
		<div class="first-item">
			<img src="images/天猫电器城-banner-first.jpg">
			<h2>HTC VIVE虚拟现实头盔</h2>
			<p class="text"><a href="#">360度沉浸式交互体验，探索超越想象的虚拟现实！不用做梦也能带你遨游世界,体验多种互动场景！</a></p>
			<p class="good"><img src="images/赞.png" width="20px" height="20px">喜欢</p>
		</div>
		<div class="sec-item">
			<div class="nav-tab-img">
				<a href="#"><img src="images/天猫商城-0nav-tab-img-1.jpg"></a>
				<a href="#"><img src="images/天猫商城-0nav-tab-img-2.jpg"></a>
			</div>
			<div class="leftBut tabBut"><img src="images/左箭头.png" width="40px" height="50px"></div>
			<div class="rightBut tabBut"><img src="images/右箭头.png" width="40px" height="50px"></div>
			<ul>
				<li id="one">1</li>
				<li id="tow">2</li>
			</ul>
		</div>
	</div>
	<div class="banner-right">
		<img src="images/天猫电器城-banner-right.jpg">
		<p class="text"><a href="#"><img src="images/天猫电器城-Show.jpg">HoverCamera的问世宣告了无人机不再是仅为航拍服务的产品，转而全面进入大众消费领域。</a></p>
		<p class="good"><img src="images/赞.png" width="20px" height="20px">   喜欢</p>
	</div>
</div>
<!-- banner--------结束 -->

<div style="clear: both;"></div>

<!-- 新奇酷玩----------开始 -->
<div class="main">
	<div class="title">
		<span id="all-Item-But">全部</span>
		<img src="images/天猫电器城-main-title-img.png">
		<span id="cool-Item-But">新奇酷玩</span>
	</div>

<!-- 全部 -->
	<div class="allItem">

		<!-- <div class="mian-item">
			<img src="images/天猫电器城-main-item-img-1.jpg" class="shopImg">
			<div class="addCart"><img src="images/car.png" width="45px" height="45px"><span>添加进购物车</span></div>
			<div class="price"><span>¥</span><b>78</b></div>
			<div class="text">
				<h1>iPhone6数据线苹果充电线器6s原装正品5手机x7plus8加长5s六快充线苹果线iPad冲电线加长2m智能断电iOS数据线</h1>
			</div>
		</div> -->
	</div>
<!-- 新奇酷玩 -->
	<div class="coolItem">
		<div class="mian-item">
			<img src="images/天猫电器城-main-item-img-5.jpg" class="shopImg">
			<div class="addCart"><img src="images/car.png" width="45px" height="45px"><span>添加进购物车</span></div>
			<div class="price"><span>¥</span><b>78</b></div>
			<div class="text">
				<h1>投影闹钟学生床头个性静音电子闹钟创意夜光懒人多功能儿童小闹钟</h1>
			</div>
		</div>
	</div>
<!-- 分页开始 -->
<div class="content">
	<div class="page">
		<ul>
		<li>首页</li>
		<li>上一页</li>
		<li class="active">1</li>
		<li>2</li>
		<li>下一页</li>
		<li>末页</li>
		<li class="count">共4页</li>
		<li class="dao">到</li>
		<li class="pagenum"><input type="text" name="pagenum"></li>
		<li class="ye">页</li>
		<li class="gobtn"><button>确定</button></li>
		</ul>
	</div>
	</div>
	<!-- 分页结束 -->
<div class="main-end"><i class="iconfont icon-end"></i></div>
</div>	
<!-- 新奇酷玩----------结束 -->

<div style="clear: both;"></div>

<!-- 底部开始 -->
<div class="foot">
	<p class="foot-linkfo">
		<a href="#">关于天猫</a>
		<a href="#">帮助中心</a>
		<a href="#">开放平台</a>
		<a href="#">诚聘英才</a>
		<a href="#">联系我们</a>
		<a href="#">网站合作</a>
		<a href="#">法律申明</a>
		<a href="#">隐私权政策</a>
		<a href="#">廉正举报</a>
		<a href="#">规则意见征集</a>
	</p>

	<p class="foot-Otherlink">
		<a href="#">阿里巴巴集团</a><span>|</span>
		<a href="#">淘宝网</a><span>|</span>
		<a href="#">天猫</a><span>|</span>
		<a href="#">聚划算</a><span>|</span>
		<a href="#">全球速卖通</a><span>|</span>
		<a href="#">阿里巴巴国际交易市场</a><span>|</span>
		<a href="#">1688</a><span>|</span>
		<a href="#">阿里妈妈</a><span>|</span>
		<a href="#">飞猪</a><span>|</span>
		<a href="#">阿里云计算</a><span>|</span>
		<a href="#">AliOS</a><span>|</span>
		<a href="#">阿里通信</a><span>|</span>
		<a href="#">万网</a><span>|</span>
		<a href="#">高德</a><span>|</span>
		<a href="#">UC</a><span>|</span>
		<a href="#">友盟</a><span>|</span>
		<a href="#">虾米</a><span>|</span>
		<a href="#">钉钉</a><span>|</span>
		<a href="#">支付宝</a>
	</p>

	<div class="foot-bottom">
		增值电信业务经营许可证：<a href="#">浙B2-20110446</a>网络文化经营许可证：<a href="#">浙网文[2015]0295-065号</a><a href="#"> 12318举报</a><a href="#"> 出版物网络交易平台服务经营备案证： 新出发浙备字第001号</a><a href="#">互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</a>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005</a>
		<a href="#"><img src="images/police.png">&nbsp;浙公网安备 33010002000120号</a><br>
		（浙）网械平台备字[2018]第00002号<br>
		<span>© 2003-2018 TMALL.COM 版权所有</span>
	</div>
</div>
<!-- 底部结束 -->

<div style="clear: both;"></div>

<!-- 购物车---------开始 -->
	<div class="m-sidebar">
		<div class="cart">
			<i id="end"></i>
			<span><a href="cart.html">购物车</a></span>
		</div>
	</div>
	<div id="msg">已成功加入购物车！</div>

<!-- 购物车---------结束 -->
<script type="text/javascript" src="js//jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.fly.min.js"></script>
<!-- <script type="text/javascript" src="js/requestAnimationFrame.js"></script> -->
<script src="js/layer/dist/layer.js"></script>
<script src="js/utils.js"></script>
<script src="js/shopList2.js"></script>
<script type="text/javascript" src="js/shopList.js"></script>

</body>
</html>